import React, { Component } from 'react';
import {ClassifyListStyled} from 'styled/Classify/ClassifyListStyled'
import {connect} from 'react-redux'
import ClassifyDetails from 'com/Classify/ClassifyDetails'
import BScroll from 'better-scroll'


class ClassifyList extends Component {
    constructor(props){
        super(props)
        this.state={
            data:[],//点击左边导航 记录id
        }
    }

    componentDidMount() {
        const wrapper = document.querySelector('.classifyList')
        new BScroll(wrapper,{
            click: true,
            scrollY:true
        })
    }
    
    shouldComponentUpdate(nextProps,nextState){
        // let num = nextProps.state.classifyReducer.get("classifyData").length
        // console.log(document.querySelector('.classifyItem').style)
        // document.querySelector('.classifyItem').style.heigth = num * 50 + "px"
        let data = nextProps.state.classifyReducer.get("classifyData")[0].children
        // eslint-disable-next-line
        this.state.data = data
        // this.setState({
        //     data:data
        // })

        return true
    }
    
    // componentDidUpdate(){
    //     // let num = this.props.state.classifyReducer.get("classifyData").length
    //     // document.querySelector('.classifyItem').style.heigth = num * 50 + "px"
        
    //     // console.log(document.querySelectorAll('.classifyList p'))
    // //     // document.querySelectorAll('.classifyList p')[0].className = 'active'
    // }
    
    // 点击选中
    checked(data,e){
        let p = document.querySelectorAll('.classifyItem p')
        p.forEach((item)=>{
            item.className = ''
        })
        e.target.className = 'active'
        this.setState({
            data
        })
    }

    render() {
        return (
            <ClassifyListStyled>
                <div className='classifyList'>
                    <div className='classifyItem'>
                        {
                            this.props.state.classifyReducer.get("classifyData").map((v,i)=>{
                                return (
                                    <p className={i===0?"active":""} onClick={this.checked.bind(this,v.children)} key={v.id}>
                                        {v.name}
                                    </p>
                                )
                            })
                        }
                    </div>
                </div>
                <ClassifyDetails data={this.state.data}/>
            </ClassifyListStyled>
        );
    }
}

export default connect((state)=>({state}))(ClassifyList);
